<template>
    <view class="select_docter_input_cp">
        <u-input 
            v-model="docter" 
            type="select" 
            @click="show = true"
            placeholder="请选择医师"/>
        <u-select 
            v-model="show" 
            :list="docterList" 
            @confirm="confirm">
        </u-select>
    </view>
</template>

<script>
//医师选择input组件
import {getUsers} from "@/common/api"
export default {
    name:"SelectDocterInputCp",
    props:{
        value:{
            type:String,
            default:'',
        },
        office:{ //所选科室
            type:String,
            default:'',
        },
    },
    data() {
        return {
            show: false,
            docterList: [],
        }
    },
    watch:{
        office(newValue){ //当科室变化时获取医师
            this.getData();
        },
    },
    computed:{
        docter:{ //医师
            get(){
                return this.value;
            },
            set(value){
                this.$emit('input',value);
            },
        },
    },
    methods:{
        confirm(e) { //确定按钮点击事件        
            this.docter = e[0].label;
            this.$emit('change',e[0].baseData); //返回所选择的原始数据
        },
        getData(){ //获取医师列表
            getUsers(
                {
                    SectionRoom:this.office,
                },
            ).then(data=>{
                this.docterList= [];
                data.forEach(item=>{
                    this.docterList.push({
                        value:item.Id,
                        label:item.name,
                        baseData:item,
                    });
                });
            }).catch(()=>{
                return;
            });
        },
    },
}
</script>

<style lang="scss" scoped>
.select_docter_input_cp {
    text-align: center;
    width: 100%;
    /deep/.u-input{
        width: 100%;
    }
}
</style>
